<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				/* width: 500px;
				height: 500px; */
				border: 2px solid !important;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- canvas是h5的新标签，作为画布，我们使用js绘图
		直线，形状（椭圆，矩形），文字，绘制图像 -->
		<canvas id="" width="500px" height="300px"></canvas>
		<script>
		    //获取标签：拿到画布
			var c = document.querySelector("canvas")
			
			//获取绘制对象：拿到画笔
			var ctx = c.getContext("2d")
			
			//给ctx的strokeStyle设置red:给画笔设置颜色
			ctx.strokeStyle = "yellow"
			ctx.fillStyle = "yellow"
			//落笔
			ctx.moveTo(35,35)
			//画线
			ctx.lineTo(150,35)
			ctx.lineTo(50,135)
			ctx.lineTo(90,0)
			ctx.lineTo(135,135)
			ctx.lineTo(35,35)
			
			ctx.moveTo(200,35)
			ctx.lineTo(250,35)
			ctx.lineTo(220,70)
			ctx.lineTo(225,20)
			ctx.lineTo(245,70)
			
			ctx.moveTo(190,100)
			ctx.lineTo(240,100)
			ctx.lineTo(210,150)
			ctx.lineTo(215,90)
			ctx.lineTo(235,150)
			
			ctx.moveTo(170,175)
			ctx.lineTo(220,175)
			ctx.lineTo(175,220)
			ctx.lineTo(195,160)
			ctx.lineTo(215,220)
			
			ctx.moveTo(90,190)
			ctx.lineTo(150,190)
			ctx.lineTo(100,230)
			ctx.lineTo(120,175)
			ctx.lineTo(135,235)
			
			//实施(连线绘制)
			ctx.stroke()
			ctx.fill()//默认黑色
		</script>
	</body>
</html>
